<script>
import { copy, globalLoading, isNull } from "@/utils/service";
import { list, commit, remove } from "@/api/operationaid/filterTemplate";

export default {
  name: "filterTemplate",
  data() {
    return {
      show: false,
      form: {
        id: undefined,
        name: "",
        // 客单价范围
        unitPrice: [0, 999999],
        // 保留
        keep: {
          // 交易金额倒叙排序前百分比 多少的数据
          tAmountPer: 100,
          // 搜索人数排序前百分比 多少的数据
          searchNumPer: 100
        },
        // 保留之外过滤
        keepOutside: {
          // 低于此uv价值
          minUvValue: 3,
          // 删除在此客单价范围外
          unitPrice: [0, 999999]
        },
        // 商品标题不能包含的字符串
        titleNotContainStr: [],
        // 商品标题必须包含得字符串
        titleContainStr: []
      },
      table: {
        loading: false,
        data: []
      }
    };
  },
  methods: {
    isNull,
    defForm() {
      this.form = {
        id: undefined,
        name: "",
        // 客单价范围
        unitPrice: [0, 999999],
        // 保留
        keep: {
          // 交易金额倒叙排序前百分比 多少的数据
          tAmountPer: 100,
          // 搜索人数排序前百分比 多少的数据
          searchNumPer: 100
        },
        // 保留之外过滤
        keepOutside: {
          // 低于此uv价值
          minUvValue: 3,
          // 删除在此客单价范围外
          unitPrice: [0, 999999]
        },
        // 商品标题不能包含的字符串
        titleNotContainStr: [],
        // 商品标题必须包含得字符串
        titleContainStr: []
      };
    },
    appendNotContainStr() {
      let _ = this;
      this.$prompt("", "请输入标题不能包含的字符", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        inputPlaceholder: "例如: 麦饭石 (支持按逗号同时输入多个 例如 :麦饭石,蒸锅)"
      }).then(({ value }) => {
        value.split(/[,，]\s*/).forEach(item => {
          item = item.trim();
          if (isNull(item) || _.form.titleNotContainStr.includes(item)) {
            return;
          }
          _.form.titleNotContainStr.push(item);
        });
      });
    },
    appendContainStr() {
      let _ = this;
      this.$prompt("", "请输入标题必须包含的字符", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        inputPlaceholder: "例如: 麦饭石 (支持按逗号同时输入多个 例如 :麦饭石,蒸锅)"
      }).then(({ value }) => {
        value.split(/[,，]\s*/).forEach(item => {
          item = item.trim();
          if (isNull(item) || _.form.titleContainStr.includes(item)) {
            return;
          }
          _.form.titleContainStr.push(item);
        });
      });
    },
    restore() {
      this.$emit("restore");
      this.show = false;
    },
    filter() {
      this.$emit("filter", this.form);
      this.show = false;
    },
    getTableData() {
      this.table.loading = true;
      list("JP").then(r => {
        this.table.data = r;
      }).finally(() => {
        this.table.loading = false;
      });
    },
    saveFilter() {
      let _ = this;
      this.$prompt("模板名称", "提交模板", {
        confirmButtonText: "提交",
        cancelButtonText: "取消",
        inputPattern: /^\S.{0,18}\S$/,
        inputErrorMessage: "名称字符长度因在 2~20 之间",
        inputValue: this.form.name
      }).then(({ value }) => {
        value = value.trim();
        let { id, name, ...other } = _.form;
        commit({
          templateId: id,
          templateName: value,
          paramList: JSON.stringify(other),
          type: "JP"
        }).then(r => {
          _.form.id = r;
          _.form.name = value;
          _.$message.success("保存记录成功");
        });
      });
    },
    removeFilter(id) {
      let loading = globalLoading(this);
      remove(id).then(r => {
        this.$message.success("删除成功")
        this.getTableData();
        if (id === this.form.id){
          this.defForm();
        }
      }).finally(() => {
        loading.close();
      });
    },
    loadFilter(row) {
      this.form.id = row.id
      this.form.name = row.name
      let param = JSON.parse(row.params);
      this.form.unitPrice = param.unitPrice
      this.form.keep.tAmountPer = param.keep.tAmountPer
      this.form.keep.searchNumPer = param.keep.searchNumPer
      this.form.keepOutside.minUvValue = param.keepOutside.minUvValue
      this.form.keepOutside.unitPrice = param.keepOutside.unitPrice
      this.form.titleNotContainStr= param.titleNotContainStr
      this.form.titleContainStr = param.titleContainStr
    }
  }
};
</script>

<template>
  <div style="display: inline-block">
    <el-button size="mini" type="primary" @click="show = true">过滤</el-button>
    <el-drawer
      :visible.sync="show"
      :with-header=false
      size="50%"
    >
      <div style="padding: 10px">
        <div>
          <el-popover
            style="margin-right: 10px;"
            placement="left"
            width="600"
            trigger="click"
            @show="getTableData"
          >
            <el-table :data="table.data">
              <el-table-column width="100" property="name" label="名称" show-overflow-tooltip align="center" />
              <el-table-column width="160" property="createTime" label="创建时间" align="center" />
              <el-table-column width="160" property="createTime" label="修改时间" align="center" />
              <el-table-column label="操作" align="center">
                <template slot-scope="{row}">
                  <el-button type="text" size="mini" @click="loadFilter(row)">载入</el-button>
                  <el-popconfirm
                    style="margin-left: 10px"
                    confirm-button-text="好的"
                    cancel-button-text="不用了"
                    icon="el-icon-info"
                    icon-color="red"
                    title="这是一段内容确定删除吗？"
                    @confirm="removeFilter(row.id)"
                  >
                    <el-button slot="reference" type="text" size="mini" style="color:#ff6b81">删除</el-button>
                  </el-popconfirm>
                </template>
              </el-table-column>
            </el-table>
            <el-button slot="reference" size="small" type="primary">查看记录</el-button>
          </el-popover>

          <el-button size="small" type="success" @click="saveFilter">保存过滤条件</el-button>
          <el-button size="small" type="info" @click="defForm">重置条件</el-button>
          <div v-if="!isNull(form.name)" style="float: right">
            <span style="font-size: 13px;color: #636e72;font-weight: bold">当前记录 : </span>
            <span>{{ form.name }}</span>
          </div>
        </div>
        <div style="height: 88vh">
          <el-form :model="form" size="mini" :inline="true" label-suffix=" : ">
            <el-divider content-position="left">step 1 不满足条件直接剔除</el-divider>
            <el-form-item label="客单价范围" prop="unitPrice">
              <el-input-number v-model="form.unitPrice[0]" :min=0 :max=form.unitPrice[1]
                               :precision="2"></el-input-number>
              ~
              <el-input-number v-model="form.unitPrice[1]" :min="form.unitPrice[0]" :max=999999
                               :precision="2"></el-input-number>
            </el-form-item>
            <el-divider content-position="left">step 2 排序计算保留数据后剔除</el-divider>
            <el-form-item label="保留交易金额倒叙排名前数据(%)" prop="keep.tAmountPer">
              <el-input-number v-model="form.keep.tAmountPer" :min=0 :max=100></el-input-number>
            </el-form-item>
            <el-form-item label="保留搜索人数倒叙排名前数据(%)" prop="keep.searchNumPer">
              <el-input-number v-model="form.keep.searchNumPer" :min=0 :max=100></el-input-number>
            </el-form-item>
            <el-form-item label="UV价值低于(剔除)" prop="keepOutside.minUvValue">
              <el-input-number v-model="form.keepOutside.minUvValue" :min=1 :max=100></el-input-number>
            </el-form-item>
            <el-form-item label="客单价范围(剔除)" prop="keepOutside.unitPrice">
              <el-input-number v-model="form.keepOutside.unitPrice[0]" :min=0 :max=form.keepOutside.unitPrice[1]
                               :precision="2"></el-input-number>
              ~
              <el-input-number v-model="form.keepOutside.unitPrice[1]" :min="form.keepOutside.unitPrice[0]" :max=999999
                               :precision="2"></el-input-number>
            </el-form-item>
            <el-divider content-position="left">step 3 根据标题内容剔除</el-divider>
            <el-card>
              <div slot="header">
                <span>不能包含的字符</span>
                <el-button style="float: right; padding: 3px 0" type="text" @click="appendNotContainStr">添加
                </el-button>
              </div>
              <el-tag
                style="margin: 0 5px 5px 0"
                v-for="(tag,index) in form.titleNotContainStr"
                :key="tag"
                :closable=true
                @close="form.titleNotContainStr.splice(index,1)"
                :type="tag">
                {{ tag }}
              </el-tag>
            </el-card>

            <el-card style="margin-top: 10px">
              <div slot="header">
                <span>必须包含的字符</span>
                <el-button style="float: right; padding: 3px 0" type="text" @click="appendContainStr">添加</el-button>
              </div>
              <el-tag
                style="margin: 0 5px 5px 0"
                v-for="(tag,index) in form.titleContainStr"
                :key="tag"
                @close="form.titleContainStr.splice(index,1)"
                :closable=true
                :type="tag">
                {{ tag }}
              </el-tag>
            </el-card>
          </el-form>
        </div>
        <div>
          <el-button @click="restore" type="info" style="width: 49%">还原数据</el-button>
          <el-button @click="filter" type="primary" style="width: 49%">过滤</el-button>
        </div>
      </div>
    </el-drawer>
  </div>
</template>

<style scoped>

</style>